<template>
  <div id="app">
    <h1>申请列表</h1>
    <div class="head"></div>
    <div id="body">
      <el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
        <el-table-column prop="commodityId" label="商品编号" width="220"></el-table-column>
        <el-table-column prop="catId" label="商品分类" width="180"></el-table-column>
        <el-table-column prop="commodity_name" label="商品名称" width="200"></el-table-column>
        <el-table-column prop="businessName" label="商家名称" width="200"></el-table-column>
        <el-table-column prop="phoneNumber" label="电话号码" width="180"></el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot="scope">
            <el-button size="mini" type="primary" @click="cheak(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
  import Vue from 'vue';
  import axios from "axios";

  export default {
    name: 'ApplyList',
    data() {
      return {
        page: 1,
        pageSize: 10,
        total: 4,
        tableData: [{
          commodityId:'001',
          catId:'商品分类',
          commodity_name:'商品名称',
          businessName: '小二',
          phoneNumber: '13134350001',
          date: '2022-09-20'
        }, {
          commodityId:'001',
          catId:'商品分类',
          commodity_name:'商品名称',
          businessName: '小二',
          phoneNumber: '13134350002',
          date: '2022-07-17'
        }, {
          commodityId:'001',
          catId:'商品分类',
          commodity_name:'商品名称',
          businessName: '小二',
          phoneNumber: '13134350003',
          date: '2022-06-15'
        }, {
          commodityId:'001',
          catId:'商品分类',
          commodity_name:'商品名称',
          businessName: '小二',
          phoneNumber: '13134350004',
          date: '2022-01-07'
        }],
        dialogVisible: false, //弹框是否显示
        //编辑对象
        goodsDetail:'商品详细信息',
        cheakId:'' //每次当前要审核的ID
      }
    },
    methods: {
      getTable() {
        return axios({
          // 查询所有待审核的商品
          url:"http://localhost:8080/goods/show/all",
          method:'get',
          params:{
            // 1-审核中
            commodityStatus:1
          }
        }).then(res=>{
          // 响应成功
          // 查询出来的当前页待审核的商品列表
          this.tableData = res.data.data;
        },err=>{
          console.log("未响应....")
        })
      },
      cheak(row){
        // 根据商品id查询商品详情
        this.$router.push({
          path:'/goods/AuditDetails',
          query:{
            commodityId:row.commodityId
          }
        })
      },
      // 驳回
      passNo(){
        axios({
          // TODO 根据商品ID修改商品状态
          url:"/goods/change/status/"+this.cheakId,
          method:'get',
        }).then(res=>{
          // 响应成功
          // 关闭审核页
          this.dialogVisible = false;
          this.getTable();
        },err=>{
          console.log("未响应....")
        })
      },
      handleSizeChange(val) {
        this.pageSize = val;
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getTable();
      }

    },
    mounted() {
      this.getTable();
    }
  }
</script>


<style>
  #app {
    /*    width: 1024px;
      margin: 0 auto; */
  }

  .addButton {
    width: 100%;
    margin-top: 20px;
  }

  #body {
    margin-top: 10px;
  }
</style>
